<template>
  <div class="app-container">
    <el-form ref="form" :model="itemBo" label-width="80px" size="mini">
      <el-form-item label="商品名称">
        <el-input v-model="itemBo.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="itemBo.title"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="itemBo.price"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="itemBo.status"></el-input>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select
          v-model="itemBo.oneId"
          placeholder="请选择一级分类"
          @change="getNextClass(itemBo.oneId)"
        >
          <el-option
            v-for="value in primaryClass"
            :key="value.categoryName"
            :label="value.categoryName"
            :value="value.categoryName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类">
        <el-select
          v-model="itemBo.twoId"
          placeholder="请选择二级分类"
          @change="getNextClass1(itemBo.twoId)"
        >
          <el-option
            v-for="value in secondaryClass"
            :key="value.categoryName"
            :label="value.categoryName"
            :value="value.categoryName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="三级分类">
        <el-select
          v-model="itemBo.threeId"
          placeholder="请选择三级分类"
          @change="getBrand(itemBo.threeId)"
        >
          <el-option
            v-for="value in tertiaryClass"
            :key="value.categoryName"
            :label="value.categoryName"
            :value="value.categoryName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select v-model="itemBo.brandId" placeholder="请选择品牌">
          <el-option
            v-for="value in brand"
            :key="value.taskmarkName"
            :label="value.taskmarkName"
            :value="value.taskmarkName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCategoryName, getSecondaryClass, getTaskmark } from "@/api/item";
import { fetchList, getObj, addObj, putObj, delObj } from "@/api/info";
export default {
  data() {
    return {
      itemBo: {
        //id: ,
        name: "",
        title: "",
        price: 0,
        status: "",
        primaryClass: "",
        secondaryClass: "",
        tertiaryClass: "",
        brand: "",
      },
      primaryClass: [
        {
          categoryId: 1001,
          parentId: 0,
          categoryName: "家用电器",
        },
      ],
      secondaryClass: [],
      tertiaryClass: [],
      brand: [],
    };
  },
  created() {
    this.getOptions();
    this.init();
    //this.itemBo=this.$router.data
  },
  methods: {
    init() {
      //判断路径有id值,做修改
      debugger;
      if (this.$route.query && this.$route.query.id) {
        //从路径获取id值
        const id = this.$route.query.id.id;
        this.itemBo = this.$route.query.id;
        //调用根据id查询的方法
        //this.getInfo(id);
      } else {
        //路径没有id值，做添加
        //清空表单
        this.itemBo = {};
      }
    },
    //根据商品id查询的方法
    getInfo(id) {
      getObj(id).then((response) => {
        debugger;
        this.itemBo = response.data.data;
      });
    },

    onSubmit() {
      if (!this.itemBo.id) {
        //添加
        addObj(this.itemBo)
          .then((data) => {
            this.$message.success("添加成功");
            //done()
            this.$router.push({ path: "/pig-item/item/info" });
          })
          .catch(() => {
            loading();
          });
      } else {
        //修改
        putObj(this.itemBo)
          .then((data) => {
            this.$message.success("修改成功");
            //done()
            this.$router.push({ path: "/pig-item/item/info" });
          })
          .catch(() => {
            loading();
          });
      }
    },
    //获得一级分类
    getOptions() {
      getCategoryName().then((response) => {
        this.primaryClass = response.data.data;
      });
    },
    //获得二级分类
    getNextClass(categoryName) {
      getSecondaryClass(categoryName).then((response) => {
        this.secondaryClass = response.data.data;
      });
    },
    //获得三级分类
    getNextClass1(categoryName) {
      getSecondaryClass(categoryName).then((response) => {
        this.tertiaryClass = response.data.data;
      });
    },
    //获得品牌
    getBrand(categoryName) {
      getTaskmark(categoryName).then((response) => {
        this.brand = response.data.data;
      });
    },
  },
};
</script>